<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--点击按钮，下面的ul隐藏或显示-->
    <button class="btn">显示/隐藏</button>
    <ul class="list" style="display: block;">
        <li>html</li>
        <li>CSS</li>
        <li>JS</li>
        <li>ES6\7\8\9\10</li>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>bootstrap</li>
    </ul>
</body>
<script src = "jquery.js"></script>
<script>
    //开发形式
    // 1、HTML css js 进行原生开发
    // 2、调用第三方库 提高开发效率
    // 3、SPA（单页面应用：single page application）
    // 组件化开发
    // 开发环境
    // node npm webpack(构建工具)

    //jquery版本
    // $('.btn').click(function(){
    //     $('.list').slideToggle();
    // })

    //原生js版本
    // var btn = document.getElementsByClassName("btn");
    // var list = document.getElementsByClassName("list");
    // btn.onclick = function(){
    //     if(list.style.display == "block"){
    //         list.style.display = "none";
    //     }else{
    //         list.style.display = "block";
    //     }
    // }

    //用js写
    // let btn = document.querySelector('.btn');
    // let list = document.querySelector('.list');
    // let isShow = true;
    // btn.onclick = function(){
    //     // if(list.style.display == 'block'){
    //     //     list.style.display = 'none';
    //     // }else{
    //     //     list.style.display = 'block';
    //     // }
    //     if(isShow){
    //         list.style.display = 'none';
    //     }else{
    //         list.style.display = 'block';
    //     }
    //     isShow = !isShow;
    // }
</script>
</html>